<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网络时钟</title>
        <style>
            #clock{
                color:#fff;
                font:16px/1.5 \5fae\8f6f\96c5\9ed1;
                background-color: #000;
                width: 300px;
                text-align: center;
                margin: 10px auto;
                padding: 20px;
            }

            span{
                background: #fff;
                color: #000;
                width: 80px;
                line-height: 2;
                border: 2px solid #b4b4b4;
                margin: 0 10px;
                padding: 0 10px;
            }
        </style>
        <script>
            window.onload = function(){
                var oCok = document.getElementById("clock");
                var oSpan = document.getElementsByTagName("span");

                setInterval(getTimes, 1000);
                getTimes();

                function getTimes(){
                    var oDate = new Date();
                    console.log(oDate);
                    var aDate = [oDate.getHours(),oDate.getMinutes(), oDate.getSeconds()];

                    for (var p in aDate){
                        oSpan[p].innerHTML = aDate[p].toString();
                    }
                }
            }
        </script>
    </head>
    <body>
        <div id="clock">
            <span>21</span>点
            <span>51</span>分
            <span>54</span>秒
        </div>
    </body>
</html>